import 'package:flutter/material.dart';
import 'package:homepad/logger/logger.dart';

class LightColorTemperatureView extends StatefulWidget {
  final int ct;
  final bool enable;
  final ValueChanged<int>? onChanged;

  const LightColorTemperatureView(
      {super.key, required this.ct, required this.enable, this.onChanged});

  @override
  State<LightColorTemperatureView> createState() => _LightColorTemperatureView();
}

class _LightColorTemperatureView extends State<LightColorTemperatureView> {
  static const radius = 20.0;

  static const height = 160.0 + 2 * radius;
  static const width = 400.0 + 2 * radius;

  static const _ctColor2700k = Color.fromARGB(255, 243, 174, 101);

  Offset _offset = const Offset(width / 2, height / 2);
  Color _color = Colors.white;

  LightColorTemperatureView? _lastWidget;
  void _updateValue(int ct) {
    var value = switch(ct) {
      > 6500 => 6500,
      < 2700 => 2700,
      _ => ct,
    };
    final percent = (value - 2700) / (6500 - 2700);
    final dx = radius + (width - 2 * radius) * percent;
    logger.info("dx: $dx");

    setState(() {
      _color = Color.alphaBlend(_ctColor2700k.withOpacity(1 - percent), Colors.white);
      _offset = Offset(dx, _offset.dy);
      _lastWidget = widget;
    });
  }

  void _setOffset(Offset value, {bool update = false}) {
    if (!widget.enable) {
      return;
    }

    final x = switch (value.dx) {
      < radius => radius,
      > width - radius => width - radius,
      _ => value.dx,
    };
    final y = switch(value.dy) {
      < radius => radius,
      > height - radius => height - radius,
      _ => value.dy,
    };
    final offset = Offset(x, y);

    final percent = (x - radius) / (width - 2 * radius);
    final newValue = percent * (6500 - 2700) + 2700;

    if (update) {
      final ct = ((newValue + 25.0) / 50).toInt() * 50;
      logger.info("percent:$percent  newValue: $ct");
      widget.onChanged?.call(ct);
    }

    logger.info("offset: $value -> $offset");
    setState(() {
      _color = Color.alphaBlend(_ctColor2700k.withOpacity(1 - percent), Colors.white);
      _offset = offset;
      _lastWidget = widget;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_lastWidget == null || _lastWidget != widget) {
      _updateValue(widget.ct);
    }
    return GestureDetector(
      onPanDown: (detail) => _setOffset(detail.localPosition),
      onPanStart: (detail) => _setOffset(detail.localPosition),
      onPanEnd: (detail) => _setOffset(detail.localPosition, update: true),
      onPanUpdate: (detail) => _setOffset(detail.localPosition),
      child: SizedBox(
        width: width,
        height: height,
        child: Stack(
          children: [
            const Padding(
                padding: EdgeInsets.all(radius),
                child: Image(
                    fit: BoxFit.fill,
                    image: AssetImage("assets/images/bg_light_color_temperature.png"))),
            AnimatedContainer(
              duration: const Duration(milliseconds: 100),
              margin: EdgeInsets.only(top: _offset.dy - radius, left: _offset.dx - radius),
              width: radius * 2,
              height: radius * 2,
              decoration: BoxDecoration(
                  color: _color,
                  borderRadius: const BorderRadius.all(Radius.circular(20)),
                  border: Border.all(width: 2, color: const Color.fromARGB(200, 255, 255, 255)),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.4),
                      spreadRadius: 1,
                      blurRadius: 2,
                      offset: const Offset(1, 1),
                    )
                  ]),
            )
          ],
        ),
      ),
    );
  }
}
